<template>
  <!--  图片列表-->
  <!--  <div>{{props.videoList}}</div>-->
  <a-list
    :grid="{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 4, xxl: 3, xxxl: 2 }"
    class="video-list"
    item-layout="horizontal"
    :data-source="props.videoList"
  >
    <template #renderItem="{ item }">
      <a-list-item class="video-list-item">
        <a :href="item.url"  target="_blank" >
          <a-card
            style="
            width: 210px;
            height: 230px;
          "
          >
            <template #cover>
              <img
                style="
                width: 210px;
                max-height: 119px;
                background-size: cover;
                object-fit: cover;
              "
                :herf="item.url"
                :src="item.pic"
                referrerpolicy="no-referrer"
              />
            </template>
            <a-card-meta :title="item.author">
              <template #description>
                <div
                  :herf="item.url"
                  class="description"
                  v-html="item.title"
                ></div>
              </template>
            </a-card-meta>
          </a-card>
        </a>
      </a-list-item>
    </template>
  </a-list>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";

interface Prpos {
  videoList: any[];
}

// console.log(p);
const props = withDefaults(defineProps<Prpos>(), {
  videoList: () => [],
});

// console.log(props.videoList);
</script>

<style scoped lang="less">
.video-list {
  align-items: center;
  //background-color: #42b983;
  .video-list-item {
    .description {
      //font-size: 2px;

      /deep/ .keyword {
        color: red;
        font-weight: 700;
      }

      display: -webkit-box;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
